<template>
  <view class="marketing-page">
    <image src="https://apizx01.sc798.com/Resource/assets/yx/bg.png" mode="aspectFill" class="bg-image" />
    <view class="header">
      <!-- <view class="header-left">
        <image src="https://apizx01.sc798.com/Resource/assets/yx/back.png" mode="aspectFit" class="back-icon" />
      </view> -->
      <view class="header-title">营销</view>
    </view>
    <view class="filter-card">
      <image src="https://apizx01.sc798.com/Resource/assets/yx/ft.png" mode="aspectFill" class="filter-bg" />
      <view class="filter-content">
        <view class="filter-title">高级筛选</view>
        <view class="filter-subtitle">自定义客群规划</view>
        <view class="filter-button">添加筛选</view>
      </view>
    </view>
    <view class="cards-grid">
      <view class="card-row">
        <view class="card-item" @click="handleCardClick('map')">
          <view class="card-content">
            <view class="card-title">地图拓客</view>
            <view class="card-subtitle">在周边找客户</view>
          </view>
          <view class="card-icon map-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/1.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
        <view class="card-item" @click="handleCardClick('bidding')">
          <view class="card-content">
            <view class="card-title">招投标</view>
            <view class="card-subtitle">招投标事件找客户</view>
          </view>
          <view class="card-icon bidding-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/2.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
      </view>

      <view class="card-row">
        <view class="card-item" @click="handleCardClick('similar')">
          <view class="card-content">
            <view class="card-title">相似推荐</view>
            <view class="card-subtitle">推荐相同类型企业</view>
          </view>
          <view class="card-icon similar-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/3.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
        <view class="card-item" @click="handleCardClick('chain')">
          <view class="card-content">
            <view class="card-title">产业链分析</view>
            <view class="card-subtitle">解构产业发掘企业</view>
          </view>
          <view class="card-icon chain-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/4.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
      </view>

      <view class="card-row">
        <view class="card-item" @click="handleCardClick('tech')">
          <view class="card-content">
            <view class="card-title">科创企业库</view>
            <view class="card-subtitle">汇聚科技资质企业</view>
          </view>
          <view class="card-icon tech-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/5.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
        <view class="card-item" @click="handleCardClick('emerging')">
          <view class="card-content">
            <view class="card-title">战新产业库</view>
            <view class="card-subtitle">汇聚战略新兴企业</view>
          </view>
          <view class="card-icon emerging-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/6.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
      </view>
      <view class="card-row">
        <view class="card-item custom-card" @click="handleCardClick('custom')">
          <image
            src="https://apizx01.sc798.com/Resource/assets/yx/diybg.png"
            mode="aspectFill"
            class="custom-bg"
          />
          <view class="card-content">
            <view class="card-title">自定义企业库</view>
            <view class="card-subtitle"
              >自由添加企业名单库,快速定位企业信息</view
            >
          </view>
          <view class="card-icon custom-icon">
            <image src="https://apizx01.sc798.com/Resource/assets/yx/7.png" mode="aspectFit" class="icon-img" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const handleCardClick = (type) => {
  console.log('点击了卡片:', type)
  switch (type) {
    case 'map':
      break
    case 'bidding':
      break
    case 'similar':
      break
    case 'chain':
      break
    case 'tech':
      break
    case 'emerging':
      break
    case 'custom':
      break
  }
}
</script>

<style lang="scss" scoped>
.marketing-page {
  padding-top: 60rpx;
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 66%;
    z-index: -1;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45rpx;
    position: relative;
    .header-left {
      position: absolute;
      left: 30rpx;
      top: 45rpx;
      .back-icon {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .header-title {
      font-size: 36rpx;
      color: #fff;
    }
  }
  .filter-card {
    position: relative;
    margin: 0 30rpx;
    border-radius: 18rpx;
    padding: 40rpx;
    overflow: hidden;
    .filter-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .filter-content {
      position: relative;
      z-index: 1;
      .filter-title {
        font-size: 35rpx;
        font-weight: bold;
      }
      .filter-subtitle {
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.6);
        margin: 10rpx 0 15rpx;
      }
      .filter-button {
        background-color: #296afd;
        color: #fff;
        width: 90rpx;
        padding: 12rpx 20rpx;
        border-radius: 50rpx;
        font-size: 22rpx;
        text-align: center;
      }
    }
  }
  .cards-grid {
    margin-top: 30rpx;
    padding: 0 30rpx;
    .card-row {
      display: flex;
      gap: 20rpx;
      margin-bottom: 20rpx;
      .card-item {
        flex: 1;
        background-color: #fff;
        border-radius: 16rpx;
        padding: 25rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        &:active {
          transform: scale(0.98);
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        }
        &.custom-card {
          position: relative;
          overflow: hidden;
          .custom-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
        .card-content {
          flex: 1;
          position: relative;
          z-index: 1;
          .card-title {
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 8rpx;
          }
          .card-subtitle {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);
          }
        }
        .card-icon {
          width: 75rpx;
          height: 80rpx;
          position: relative;
          z-index: 1;
          .icon-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
